<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header"></MainHeader>
        <div class="main-container-content contentBoxs not bgColor">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="学生教材" :seconTitle="queryData.name"></Commontitle>
                </el-col>
            </el-row>
            <div class="lists_containers" v-if="!isLoading">
                <div class="lists_containers_content">
                    <div class="lists_containers_content_left">
                        <learnHeader @tabClickEvent="tabClickEvent" :currentIndex="contentIndex"></learnHeader>
                    </div>
                    <div class="lists_containers_content_right">
                        <!-- 教材阅读 -->
                        <template v-if="contentIndex==0">
                            <pdfshow :bookInfo="queryData"></pdfshow>
                        </template>
                        <!-- 基础知识点 -->
                        <template v-if="contentIndex==1">
                          <basicKnowledge></basicKnowledge>
                        </template>
                        <!-- 专病知识点 -->
                        <!-- <template v-if="contentIndex==2">
                          <specialiKnowledge></specialiKnowledge>
                        </template> -->
                        <!-- 章节练习 -->
                        <template v-if="contentIndex==3">
                         <chapterExercises type="1"></chapterExercises>
                        </template>
                        <!-- 课件学习 -->
                        <template v-if="contentIndex==4">
                         <coursewareLearn></coursewareLearn>
                        </template>
                    
                       
                    </div>
                </div>

            </div>


        </div>



        <!-- <MainFooter :showFixed="true" backgroundColor="rgba(58, 98, 215, 1)" /> -->
    </div>
</template>

<script>
import learnHeader from '@/templates/teachPlaltform/components/learnHeader'
import pdfshow from '@/templates/teachPlaltform/components/pdfshow1'
import basicKnowledge from '@/templates/teachPlaltform/components/basicKnowledge'//基础知识
import specialiKnowledge from '@/templates/teachPlaltform/components/specialiKnowledge'
import chapterExercises from '@/templates/teachPlaltform/components/chapterExercises'//章节练习
import mistakesCollection from '@/templates/teachPlaltform/components/mistakesCollection'//错题集
import myCollection from '@/templates/teachPlaltform/components/myCollection'//我的收藏
import coursewareLearn from '@/templates/teachPlaltform/components/coursewareLearn'//课件学习
import myNote from '@/templates/teachPlaltform/components/myNote'//我的笔记
// myNote
export default {
    name: 'teachManageList',
    components: {
        pdfshow,
        learnHeader,
        basicKnowledge,
        specialiKnowledge,
        chapterExercises,
    
        coursewareLearn,
    
    },
    data() {
        return {
            isLoading:true,
            contentIndex:0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                nickName: undefined,
                phonenumber: undefined,
                status: undefined,

            },
            queryData:{},
            sysUseTypeArr: [
                { label: '类型1', value: '0' },
                { label: '类型2', value: '1' }
            ],

        };
    },
    mounted() {
        const { state } = this.$store;
        let option=this.$route.query
        console.log(option)
        this.queryData=option
        this.isLoading=false

    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        tabClickEvent(data){
            this.contentIndex=data.index
        },
        handleQuery() {

        },

    },
};
</script>

<style scoped lang="scss">
.bgColor {
    background: linear-gradient(106deg, #ffecec 0%, #fff5f4 100%);
}

.lists_containers {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    padding: 0px !important;
    &_content{
        display: flex;
        align-items: center;
        height:100%;
        &_left{
            width:120px;
            height:100%;
        }
        &_right{
            margin-left: 10px;
            width:calc(100% - 130px);
            height:100%;
        }
    }
}
</style>
